<!--
 * @Author: tkp
 * @Date: 2024-05-13 17:26:21
-->
<template>
  <div>
    <div class="comp_contain">
      <div class="comp_search">
        <Input v-model="bloc.queryForm.menuName" size="medium" clearable placeholder="菜单名称"></Input>
        <Select size="medium" placeholder="请选择所属系统" :clearable="false" v-model="bloc.queryForm.systemId" :data="bloc.sysTeamType" :jsonType="{'value':'systemId','label':'systemName'}"></Select>
        <el-button type="text" size="medium" icon="el-icon-search" @click="query">搜索</el-button>
        <el-button type="text" size="medium" icon="el-icon-delete" @click="clearForm">清除条件</el-button>
        <el-button type="text" size="medium" icon="el-icon-plus" @click="add" v-hasRole="{frontRoute:'add'}">新增</el-button>
      </div>
      <div class="comp_body">
        <el-table ref="table" row-key="menuId" height="calc(100vh - 212px)" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :data="bloc.tableData" :header-cell-style="{'text-align':'center','background-color':'#f8f8f9','color':'#606266'}" :cell-style="{'text-align':'center',}">
          <el-table-column prop="menuName" label="菜单名称"></el-table-column>
          <el-table-column prop="systemId" label="所属系统">
            <template slot-scope="scope">
              <span v-for="(item,index) in bloc.sysTeamType" :key="index">
                <span v-if="scope.row.systemId==item.systemId"> {{item.systemName}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="frontPath" label="前端路径">
            <template slot-scope="scope">
              <span v-if="scope.row.frontPath">{{scope.row.frontPath}}</span>
              <span v-else>/</span>
            </template>
          </el-table-column>
          <el-table-column prop="frontRoute" label="路径名称">
            <template slot-scope="scope">
              <span v-if="scope.row.frontRoute">{{scope.row.frontRoute}}</span>
              <span v-else>/</span>
            </template>
          </el-table-column>
          <el-table-column prop="sortIndex" label="排序"></el-table-column>
          <el-table-column prop="buttonFlag" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.buttonFlag==0">页面</span>
              <span v-if="scope.row.buttonFlag==1">按钮</span>
            </template>
          </el-table-column>
          <el-table-column prop="visible" label="是否可见">
            <template slot-scope="scope">
              <span v-if="scope.row.visible==0">不可见</span>
              <span v-if="scope.row.visible==1">可见</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170">
            <template slot-scope="scope">
              <el-button type="text" @click="addChildItem(scope.row)" v-hasRole="{frontRoute:'add'}">新增</el-button>
              <el-button type="text" @click="modifySortItem(scope.row)" v-hasRole="{frontRoute:'modify'}">修改顺序</el-button>
              <el-dropdown trigger="click" @command="dropClick($event,scope.row)">
                <el-button type="text">更多</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command='1' v-hasRole="{frontRoute:'modify'}">修改</el-dropdown-item>
                  <el-dropdown-item command='2' v-hasRole="{frontRoute:'del'}">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <div slot="empty">
            <el-empty description="暂无数据" :image-size="250" :image="require('@/assets/img/empty_data.png')"></el-empty>
          </div>
        </el-table>
      </div>
    </div>
    <el-dialog title="新增菜单" :close-on-click-modal="false" :visible.sync="bloc.addPop" append-to-body destroy-on-close v-if="bloc.addPop">
      <Add :data="bloc.rowItem" :tableData="bloc.tableData" @addData="addDataFun"></Add>
    </el-dialog>
    <el-dialog title="编辑菜单" :close-on-click-modal="false" :visible.sync="bloc.editPop" append-to-body destroy-on-close v-if="bloc.editPop">
      <Edit :data="bloc.rowItem" :tableData="bloc.tableData" @editData="editDataFun"></Edit>
    </el-dialog>
    <el-dialog title="编辑菜单顺序" :close-on-click-modal="false" :visible.sync="bloc.sortPop" append-to-body destroy-on-close v-if="bloc.sortPop">
      <EditSortPage :data="bloc.rowItem" @editSortData="editSortDataFun"></EditSortPage>
    </el-dialog>
  </div>
</template>

<script>
import { IndexBloc } from './bloc/index'
import Add from './temp/add.vue'
import Edit from './temp/edit.vue'
import EditSortPage from './temp/editSort.vue'
export default {
  name: 'pageMenu',
  components: {
    Add,
    Edit,
    EditSortPage,
  },
  data() {
    return {
      bloc: new IndexBloc()
    }
  },
  mounted() {
    this.bloc.loadSystem()
    this.load()
  },
  methods: {
    load() {
      this.bloc.pageNum = 1
      this.query()
    },
    query() {
      let param = {
        menuName: this.bloc.queryForm.menuName,
        systemId: this.bloc.queryForm.systemId,
      }
      this.bloc.load(param)
    },
    add() {
      this.bloc.rowItem = ''
      this.bloc.addPop = true
    },
    addChildItem(item) {
      this.bloc.rowItem = item
      this.bloc.addPop = true
    },
    addDataFun(e) {
      if (e) {
        this.bloc.add(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.addPop = false
        })
      } else {
        this.bloc.addPop = false
      }
    },
    editDataFun(e) {
      if (e) {
        this.bloc.modify(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.editPop = false
        })
      } else {
        this.bloc.editPop = false
      }
    },
    dropClick(index, item) {
      if (index == '1') {
        this.bloc.rowItem = item
        this.bloc.editPop = true
      } else if (index == '2') {
        this.delItem(item)
      }
    },
    modifySortItem(item) {
      this.bloc.rowItem = item
      this.bloc.sortPop = true
    },
    editSortDataFun(e) {
      if (e) {
        this.bloc.modify(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.sortPop = false
        })
      } else {
        this.bloc.sortPop = false
      }
    },
    delItem(item) {
      this.$confirm('注意:将要删除此菜单,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.bloc.del(item.menuId).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
        })
      })
    },
    clearForm() {
      this.bloc.queryForm.menuName = ''
      this.bloc.queryForm.systemId = ''
      this.load()
    }
  }
}
</script>

<style lang="scss" scoped>
.comp_contain {
  overflow: hidden;
  padding: 20px;
  border-radius: 6px;
  .comp_search {
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 16px;
  }
  .comp_body {
    border-radius: 14px;
    background: #fff;
    padding: 10px;
  }
  .comp_foot {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
</style>

